<!-- 用于自定义布局，Top图片按钮菜单 -->
<template>
  <div class="menu-item" @click="hover" ref="divRef">
    <img :src="imageUrl" :height="props.height" />
    <div class="menu-title">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  selectedPath: {
    // 选中route
    type: String,
    required: true,
  },
  bg: {
    // 默认背景图片
    type: String,
    required: true,
  },
  bgHover: {
    // 按下背景图片
    type: String,
    required: true,
  },
  index: {
    // 当前菜单标识
    type: String,
    required: false,
  },
  height: {
    // 高度
    type: Number,
    required: false,
  },
});

// 最上级div
const divRef = ref(null);
// 图片路径
const imageUrl = ref(null);

// 判断是否点击
const reset = () => {
  if (props.selectedPath == props.index) {
    imageUrl.value = props.bgHover;
  } else {
    imageUrl.value = props.bg;
  }
};

// 鼠标经过事件
const hover = () => {
  imageUrl.value = props.bgHover;
};

// 根据路径判断是否变化背景颜色
watch(
  () => props.selectedPath,
  () => {
    reset();
  }
);

onMounted(() => {
  reset();
});
</script>

<style lang="scss" scoped>
.menu-item {
  position: relative;
  width: 100%;

  img {
    width: 100%;
    height: 44px;
  }
  .menu-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
